<template>
  <div>
    <div class="clearfix">
      <el-button-group class="mr-10">
        <slot name="addBtn"></slot>
        <el-button plain icon="el-icon-document" size="small" @click="importFile">导入excel</el-button>
        <el-button plain icon="el-icon-document" size="small" @click="putOut">导出excel</el-button>
        <el-button plain icon="el-icon-refresh-right" size="small" @click="refresh">刷新</el-button>
        <!-- <el-button plain icon="el-icon-delete" size="small" @click="batchDel">删除</el-button> -->
      </el-button-group>

      <el-button type="primary" plain size="small" v-popover:addressBook>+ 企业微信通讯批量添加</el-button>
      <el-popover
        ref="addressBook"
        placement="bottom-start"
        trigger="click"
        width="280"
        :visible-arrow="false"
        popper-class="popover-ab"
      >
        <Addressbook />
      </el-popover>
      <slot name="filterCol"></slot>
    </div>
    <ImportExcel @closeImport="closeImport" :visible="visible" :importData="importData" />
  </div>
</template>

<script>
import Addressbook from "@/components/Addressbook";
import {
  userAll,
  userImport,
  userErrExport,
  userExport
} from "api/seting/user";
import { membersCol } from "@/components/FilterCol/seting";
import dayjs from "dayjs";
import { confirm } from "@/utils/tool";
import { openDownloadDialog, outPutForArray } from "@/utils/outPutExcel";
import { showLoading, hideLoading } from "@/utils/loading";
import ImportExcel from "@/components/ImportExcel";
export default {
  components: { Addressbook, ImportExcel },
  props: ["listQuery"],
  data() {
    return {
      visible: false,
      importData: {
        excelName: "成员信息",
        fieldList: membersCol.filter(o => o.hidden != true),
        importUrl: userImport,
        errExport: userErrExport,
        fileUrl: "/download/成员信息.xlsx"
      }
    };
  },
  methods: {
    refresh() {
      this.$parent.loadData();
    },
    // 导出excel
    async putOut() {
      try {
        await confirm("您确定是否要导出商品列表？");
        showLoading("请稍等");
        userExport(this.listQuery.params).then(res => {
          let exportName =
            this.importData.excelName +
            "导出" +
            dayjs().format("YYYYMMDDHHmmss") +
            ".xlsx";
          openDownloadDialog(res, exportName);
          hideLoading();
        });
      } catch (err) {
        console.log(err);
      }
    },
    // 导入visible
    importFile() {
      this.visible = true;
    },
    // 关闭导入
    closeImport(val) {
      this.visible = val;
    }
    // batchDel() {
    //   this.$parent.batchDel();
    // }
  }
};
</script>

<style lang='scss' scoped>
</style>
